import React from 'react';
import ReactDOM from 'react-dom';

function Login(props) {
  return (
    <div>
      <h2>用户登录</h2>
      <p>
        用户名：<input type="text" />
      </p>
      <p>
        密&nbdp;&nbsp;码：<input type="password" />
      </p>
      <p>
        <input type="button" value="登录" onClick={()=>props.history.push('/layout')} />
      </p>
    </div>
  )
}

function Con01() {
  return <h2>右侧内容一</h2>
}

function Con02() {
  return <h2>右侧内容二</h2>
}

function Con03() {
  return <h2>右侧内容三</h2>
}

function Layout() {
  return (
    <div>
      <div className="menu">
        <CustomLink label="菜单文字一" to="/layout" exact={true} />
        <CustomLink label="菜单文字二" to="/layout/con02" />
        <CustomLink label="菜单文字三" to="/layout/con03" />
      </div>
      <div className="content">
        <Route exact path="/layout" component={Con01} />
        <Route path="/layout/con02" component={Con02} />
        <Route path="/layout/con03" component={Con03} />
      </div>
    </div>
  )
}

function App() {
  return (
    <HashRouter>
      <Route exact path="/" component={Login} />
      <Route path="/layout" component={Layout} />
    </HashRouter>
  )
}

function CustomLink({label,to,exact}) {
  return <Route 
          path = {to}
          exact = {exact}
          children = {
            ({match})=>(
              <Link to={to} className={match?"active":""}></Link>
            )
          }
  />
}

ReactDOM.render(<App />,document.getElementById('root'));

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
